<template>
<div>
<div style=" margin-bottom:30px;text-align:center;">
<el-input placeholder="请输入姓名" suffix-icon="el-icon-search" v-model="adminuserName" style="width:200px;" size="medium"></el-input>
<el-button @click="search" style="margin-left:10px" type="primary" size="medium">搜索</el-button>
<el-button @click="reset" style="margin-left:10px" type="danger" size="medium">重置</el-button>
</div>
<div style="float:left;">
        <el-button type="success" size="medium" @click="handleAdd" style="margin-right:10px">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
        <el-popconfirm
            class="ml-5"
            confirm-button-text='确定'
            cancel-button-text='我再想想'
            icon="el-icon-info"
            icon-color="red"
            title="您确定批量删除这些数据吗？"
            @confirm="delBatch()"
        >
          <el-button type="danger" size="medium" slot="reference">批量删除 <i class="el-icon-delete-solid"></i></el-button>
        </el-popconfirm>
</div>

<el-drawer
  title="增加信息"
  :visible.sync="drawer"
  :with-header="false">
  <h1>新增信息</h1>
    <el-form :rules="rules" :model="add"  ref="add" style="text-align:left;padding-left:40px">
 <el-form-item prop="userName" label="用户名" class="div">
<el-input style="width:200px" v-model="add.userName" size="medium"></el-input>
  </el-form-item>
<el-form-item  label="年龄" class="div">
<el-input style="width:200px" v-model="add.age" size="medium"></el-input>
  </el-form-item>
    <el-form-item prop="password" label="密码" class="div">
<el-input style="width:200px" v-model="add.password" size="medium"></el-input>
  </el-form-item>

    <el-form-item  label="住址" class="div">
<el-input style="width:200px" v-model="add.address" size="medium"></el-input>
  </el-form-item>

    <el-form-item prop="sex" label="性别" class="div">
<el-select v-model="add.sex"  size="medium" placeholder="请输入性别" style="width:200px"  filterable>
        <el-option label="女" value="0"></el-option>
        <el-option label="男" value="1"></el-option>
      </el-select>
  </el-form-item>
  <el-form-item style="text-align:center;margin-top:40px">
    <el-button size="medium" type="primary" @click="addAdmin('add')">提交</el-button>
  </el-form-item>
   </el-form>

</el-drawer>
 <el-table
    :data="tableData"
    v-loading="loading"
    stripe
    style="width: 100%"
    tooltip-effect="dark"
    @selection-change="handleSelectionChange"
    >

    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="姓名"
      >
    </el-table-column>
     <el-table-column
      prop="age"
      label="年龄"
      >
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      >
    </el-table-column>
   <el-table-column
      prop="sex"
      label="性别"
    >
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.sex === 0 ? 'primary' : 'success'"
          disable-transitions>{{scope.row.sex === 0 ? '女' : '男'}}</el-tag>
      </template>
    </el-table-column>
     <el-table-column
      prop="address"
      label="住址"
      >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row.id)" type="text" size="small">编辑</el-button>
       <el-popconfirm
  confirm-button-text='确定'
  cancel-button-text='取消'
  icon="el-icon-info"
  icon-color="red"
  title="确定删除这段内容吗？"
  @confirm="deleteById(scope.row.id)"
>
  <el-button slot="reference" type="text"  style="margin-left:10px">删除</el-button>
</el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-empty :image-size="200" v-if="flag==false"></el-empty>
  <el-dialog  title="管理信息" style="text-align:left" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="用户名" style="width:200px;">
      <el-input v-model="form.userName" disabled autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码"  style="width:200px;">
     <el-input v-model="form.password" disabled autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" style="width:200px;">
     <el-select v-model="form.sex" placeholder="请输入性别" filterable>
        <el-option label="女" value="0"></el-option>
        <el-option label="男" value="1"></el-option>
      </el-select>
    </el-form-item>
        <el-form-item label="住址" style="width:200px;">
     <el-input v-model="form.address" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="back()">取 消</el-button>
    <el-button type="primary" @click="updateAdmin()">确 定</el-button>
  </div>
</el-dialog>
 <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</div>
</template>

<script>
export default {
  name: 'AdminView',
  data () {
    return {
      drawer: false,
      flag: false,
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      adminuserName: '',
      multipleSelection: [],
      dialogFormVisible: false,
      loading: true,
      form: {
        id: '',
        userName: '',
        password: '',
        sex: '',
        address: ''
      },
      add: {
        userName: '',
        password: '',
        sex: '',
        address: '',
        age: ''
      },
      rules: {
        userName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '至少6位数密码', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    delBatch () {
      const ids = this.multipleSelection.map(v => v.id)
      this.request.post('/user/deleteAdmin', ids).then(res => {
        if (res.code === '200') {
          this.$message({
            showClose: true,
            type: 'success',
            message: '操作成功'
          })
          this.loadGet()
        } else {
          this.$message({
            showClose: true,
            type: 'error',
            message: '网络异常,操作失败'
          })
        }
      })
    },
    deleteById (id) {
      this.request.post('/user/deleteAdminById/' + id).then(res => {
        if (res.code === '200') {
          this.loadGet()
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: '操作失败',
            type: 'error'
          })
        }
      })
    },
    addAdmin (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.request.post('/user/addAdmin', this.add).then(res => {
            if (res.code === '200') {
              this.$message.success('操作成功')
              this.loadGet()
              this.add.userName = ''
              this.add.sex = ''
              this.add.password = ''
              this.add.address = ''
              this.add.age = ''
            } else {
              this.$message.danger('网络异常，新增失败')
            }
          })
          this.drawer = false
        } else {
          this.$message.error('请填写完整')
        }
      })
    },
    // 打开新增页面
    handleAdd () {
      this.drawer = true
    },
    back () {
      this.form.id = ''
      this.form.userName = ''
      this.form.password = ''
      this.form.sex = ''
      this.form.address = ''
      this.dialogFormVisible = false
    },
    async updateAdmin () {
      if (this.form.sex === '男') {
        this.form.sex = 1
      } else if (this.form.sex === '女') {
        this.form.sex = 0
      }
      this.request.post('/user/updateAdmin', this.form).then(res => {
        if (res.code === '200') {
          this.loadGet()
          this.dialogFormVisible = false
          this.$message.success('操作成功')
        } else {
          this.$message.danger('网络异常，修改失败')
        }
      })
    },
    handleDelete (id) {
      this.request.post('/user/deleteAdminById/' + id).then(res => {
        if (res.code === '200') {
          this.loadGet()
          this.dialogFormVisible = false
          this.$message.success('操作成功')
        } else {
          this.$message.danger('网络异常，修改失败')
        }
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    reset () {
      this.adminuserName = ''
      this.loadGet()
    },
    search () {
      this.loadGet()
    },
    handleClick (id) {
      this.form.id = id
      this.request.post('/user/getAdminById' + '/' + id
      ).then(res => {
        if (res.code === '200') {
          this.form = res.data
          if (res.data.sex === 0) {
            this.form.sex = '女'
          } else {
            this.form.sex = '男'
          }
        } else {
          this.$message.danger('加载失败')
        }
      })
      this.dialogFormVisible = true
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.loadGet()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.loadGet()
    },
    async loadGet () {
      this.request.post('/user/getAdmin' + '/' + this.adminuserName + '/' + this.pageNo + '/' + this.pageSize
      ).then(res => {
        this.flag = true
        this.tableData = res.data.list
        this.total = res.data.total
        this.loading = false
      })
    }
  },
  mounted () {
    this.loadGet()
  },
  compute: {
    sex () {
      if (this.form.sex === '0') {
        return '女'
      } else {
        return '男'
      }
    }
  }
}
</script>

<style>
.div{
  margin-top:40px;
  margin-bottom: 20px;
}
</style>
